<script setup lang="ts">
import MyButton from "@/components/common/myButton.vue";
import type {enterpriseInfoType} from "@/utils/type";
import {ref, watch} from "vue";
import {useRouter} from "vue-router";
import {getObj} from "@/utils/obs";
import {followEnterpriseApi} from "@/api/path/enterpriseApis";
import {ElMessage} from "element-plus";

const router = useRouter();
// interface enterpriseElementType extends enterpriseInfoType{
//   admin_id: number,
//   admin_name: string,
// }
interface enterpriseElementType {
  id: string,
  name: string,
  intro: string,
  industry: string,
  contact_way: string,
  image_key: string,
  follow_count: number,
  admin_id: string
  creator_name: string
}
const elementData = ref<enterpriseElementType>({
  id: '',
  name: '',
  intro: '',
  industry: '',
  contact_way: '',
  image_key: '',
  follow_count: 0,
  admin_id: '',
  creator_name: '',
})
const props = defineProps({
  data: {
    type: Object,
    require: true,
  }
});
watch(() => props, (newValue, oldValue) => {
  elementData.value = newValue.data
}, {deep: true, immediate: true});
const handleToEnterprise = (eid: string) => {
  router.push({
    path: '/enterprise',
    query: {
      enterpriseId: eid,
    }
  })
}
const toChat = (id: number) => {
  router.push({path: "/chat", query: {id: id} });
}
const handleFollow = (id: string) => {
  followEnterpriseApi(id).then(res => {
    if (res.errno == 1) {
      ElMessage.success('关注成功')
    }
    else {
      ElMessage.error(res.msg);
    }
  })
}

</script>

<template>
  <span class="head-wrapper">
<!--    <img style="height: 80px; width: 80px; margin-right: 20px; border-radius: 5px" :src="getObj(elementData.enterpriseImgKey)">-->
    <span style="display: flex; flex-direction: column">
      <span class="clickable enterpriseName" @click="handleToEnterprise(elementData.id)">{{ elementData.name }}</span>
      <span class="secondaryInfo">{{ elementData.industry }}</span>
      <span class="secondaryInfo">{{ "关注：" + elementData.follow_count }}</span>
    </span>
  </span>
  <span style="display: flex">
    <my-button type="light" :width="200" @click="toChat(elementData.admin_id)">
      立刻沟通:
      <span :title="elementData.admin_name" class="admin-name">
        {{ elementData.creator_name }}
      </span>
      经理
    </my-button>
    <my-button style="margin-left: 20px" type="light" :width="80" @click="handleFollow(elementData.id)">关注</my-button>
  </span>
</template>

<style scoped>
.head-wrapper {

  .enterpriseName {
    font-weight: 600;
    font-size: var(--font-size-large);
  }
  .secondaryInfo {
    font-size: var(--font-size-small);
    color: grey
  }

  .clickable:hover {
    cursor: pointer;
    color: var(--color-primary);
    text-decoration: underline;
  }
}
.admin-name {
  max-width: 80px;
  padding: 0 5px;
  display: inline-block;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>